<template>
  <div class="gasStatistics-body">
    <!-- 头部模块 -->
    <div class="header">
      <ul class="left">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
      <div class="title">
        <span>燃气管道监测平台</span>
      </div>
      <ul class="right">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <!-- 主体模块 -->
    <div class="main">
      <!-- 左侧模块 -->
      <div class="main-left">
        <!-- 设备总数 -->
        <div class="completion">
          <div class="completion-content">
            <div class="rate">
              <h5><span>设备总数</span></h5>
              <p>{{ countGasClient.totalCount }}</p>
            </div>
          </div>
        </div>
        <!-- 闪电 -->
        <div class="lightning">
          <div class="lightning1">
            <div class="sd1" ref="sd1"></div>
            <div class="jd1">
              <ul class="cd">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
              </ul>
              <div class="box1"></div>
              <div class="box2"></div>
            </div>
          </div>
          <div class="lightning2">
            <div class="sd2" ref="sd2"></div>
            <div class="jd2">
              <ul class="cd">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
              </ul>
              <div class="box1"></div>
              <div class="box2"></div>
            </div>
          </div>
        </div>
        <!-- top3 -->
        <div class="top3">
          <ul>
            <li>
              <div class="title">NO.1</div>
              <div class="content">
                <p>80%</p>
                <span>G0001</span>
              </div>
            </li>
            <li>
              <div class="title">NO.2</div>
              <div class="content">
                <p>80%</p>
                <span>门店2</span>
              </div>
            </li>
            <li>
              <div class="title">NO.3</div>
              <div class="content">
                <p>80%</p>
                <span>门店3</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 中间模块 -->
      <div class="main-middle">
        <div class="external1"></div>
        <div class="external2"></div>
        <div class="external3"></div>
        <div class="external4"></div>
        <!-- 加载 -->
        <div class="jz1">
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
        <div class="jz2">
          <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
          </ul>
        </div>
        <!-- 内边框 -->
        <div class="inner1"></div>
        <div class="inner2"></div>
        <!-- 内加载箭头模块 -->
        <div class="arrow-l">
          <ol>
            <li></li>
            <li></li>
            <li></li>
          </ol>
        </div>
        <div class="arrow-r">
          <ol>
            <li></li>
            <li></li>
            <li></li>
          </ol>
        </div>
        <!-- 中间仪表图 -->
        <div class="meter"></div>
        <!-- 中间背景canvas -->
        <div class="animate"></div>
        <!-- 总报警数 -->
        <div class="sale">
          <p><span>总报警数</span></p>
          <p><span>{{ gasEventThisYearStatistics.totalIi + gasEventThisYearStatistics.totalAngle + gasEventThisYearStatistics.totalPosition }}</span></p>
        </div>
      </div>
      <!-- 右侧模块 -->
      <div class="main-right">
        <!-- 同比 -->
        <div class="compare">
          <div class="compare-content">
            <div class="rate2">
              <h5><span>新装</span></h5>
              <p>{{ countGasClient.newCount }}</p>
            </div>
          </div>
        </div>
        <!-- 闪电 -->
        <div class="lightning">
          <div class="lightning3">
            <div class="jd3">
              <ul class="cd">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
              </ul>
              <div class="box1"></div>
              <div class="box2"></div>
            </div>
            <div class="sd3" ref="sd3"></div>
          </div>
          <div class="lightning4">
            <div class="jd4">
              <ul class="cd">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
              </ul>
              <div class="box1"></div>
              <div class="box2"></div>
            </div>
            <div class="sd4" ref="sd4"></div>
          </div>
        </div>
        <!-- top6 -->
        <div class="top6">
          <ul>
            <li>
              <div class="title">NO.4</div>
              <div class="content">
                <p>80%</p>
                <span>G005</span>
              </div>
            </li>
            <li>
              <div class="title">NO.5</div>
              <div class="content">
                <p>80%</p>
                <span>G006</span>
              </div>
            </li>
            <li>
              <div class="title">NO.6</div>
              <div class="content">
                <p>80%</p>
                <span>G007</span>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 底部模块 -->
    <div class="bottom">
      <div class="ul-box">
        <ul>
          <li>
            <div class="li-content">
              <p><span>震动报警</span></p>
              <p><span>{{ gasEventThisYearStatistics.totalIi }}</span></p>
              <div class="li-box">
                <div class="box1">
                  <h5><span>本日</span></h5>
                  <div class="pic">
                    <img src="@/assets/images/visual/dataStatistics/wc.png" alt="">
                    <span>{{ gasEventThisYearStatistics.todayIi }}</span>
                  </div>
                </div>
                <div class="box2">
                  <h5><span>本月</span></h5>
                  <div class="pic">
                    <img src="@/assets/images/visual/dataStatistics/zc.png" alt="">
                    <span>{{ gasEventThisYearStatistics.monthIi }}</span>
                  </div>
                </div>
                <div class="box3">
                  <h5><span>本年</span></h5>
                  <div class="pic">
                    <img src="@/assets/images/visual/dataStatistics/sq.png" alt="">
                    <span>{{ gasEventThisYearStatistics.yearIi }}</span>
                  </div>
                </div>
                <div class="box4">
                  <h5><span>月环比</span></h5>
                  <div class="pic">
                    <img src="@/assets/images/visual/dataStatistics/tb.png" alt="">
                    <span>{{ gasEventThisYearStatistics.lastMonthIi == 0 ? '-' : (100*gasEventThisYearStatistics.monthIi/gasEventThisYearStatistics.lastMonthIi).toFixed(2) + '%' }}</span>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="li-content">
              <p><span>位移报警</span></p>
              <p><span>{{ gasEventThisYearStatistics.totalPosition }}</span></p>
              <div class="li-box">
                <div class="box1">
                  <h5><span>本日</span></h5>
                  <div class="pic">
                    <img src="@/assets/images/visual/dataStatistics/wc.png" alt="">
                    <span>{{ gasEventThisYearStatistics.todayPosition }}</span>
                  </div>
                </div>
                <div class="box2">
                  <h5><span>本月</span></h5>
                  <div class="pic">
                    <img src="@/assets/images/visual/dataStatistics/zc.png" alt="">
                    <span>{{ gasEventThisYearStatistics.monthPosition }}</span>
                  </div>
                </div>
                <div class="box3">
                  <h5><span>本年</span></h5>
                  <div class="pic">
                    <img src="@/assets/images/visual/dataStatistics/sq.png" alt="">
                    <span>{{ gasEventThisYearStatistics.yearPosition }}</span>
                  </div>
                </div>
                <div class="box4">
                  <h5><span>月环比</span></h5>
                  <div class="pic">
                    <img src="@/assets/images/visual/dataStatistics/tb.png" alt="">
                    <span>{{ gasEventThisYearStatistics.lastMonthPosition == 0 ? '-' : (100*gasEventThisYearStatistics.monthPosition/gasEventThisYearStatistics.lastMonthPosition).toFixed(2) + '%' }}</span>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li>
            <div class="li-content">
              <p><span>倾斜报警</span></p>
              <p><span>{{ gasEventThisYearStatistics.totalAngle }}</span></p>
              <div class="li-box">
                <div class="box1">
                  <h5><span>本日</span></h5>
                  <div class="pic">
                    <img src="@/assets/images/visual/dataStatistics/wc.png" alt="">
                    <span>{{ gasEventThisYearStatistics.todayAngle }}</span>
                  </div>
                </div>
                <div class="box2">
                  <h5><span>本月</span></h5>
                  <div class="pic">
                    <img src="@/assets/images/visual/dataStatistics/zc.png" alt="">
                    <span>{{ gasEventThisYearStatistics.monthAngle }}</span>
                  </div>
                </div>
                <div class="box3">
                  <h5><span>本年</span></h5>
                  <div class="pic">
                    <img src="@/assets/images/visual/dataStatistics/sq.png" alt="">
                    <span>{{ gasEventThisYearStatistics.yearAngle }}</span>
                  </div>
                </div>
                <div class="box4">
                  <h5><span>月环比</span></h5>
                  <div class="pic">
                    <img src="@/assets/images/visual/dataStatistics/tb.png" alt="">
                    <span>{{ gasEventThisYearStatistics.lastMonthAngle == 0 ? '-' : (100*gasEventThisYearStatistics.monthAngle/gasEventThisYearStatistics.lastMonthAngle).toFixed(2) + '%' }}</span>
                  </div>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>


<script>
import '@/assets/styles/visual/dataStatistics.css'
import { gasVisualStatistics } from "@/api/device/gasStatistics";

export default {
  name: "GasStatistics",
  data() {
    return {
      countGasClient: {
        totalCount: 0,
        newCount: 0
      },
      eventRank: [],
      gasEventThisYearStatistics: {
        todayPosition: 0,
        todayAngle: 0,
        todayIi: 0,
        monthPosition: 0,
        monthIi: 0,
        monthAngle: 0,
        lastMonthPosition: 0,
        lastMonthIi: 0,
        lastMonthAngle: 0,
        yearPosition: 0,
        yearAngle: 0,
        yearIi: 0,
        totalPosition: 0,
        totalAngle: 0,
        totalIi: 0
      }
    };
  },
  created() {
    this.getGasVisualStatistics()
    this.$nextTick(() => {
      this.placeholderPic()
      this.sd1('sd1')
      this.sd1('sd2')
      this.sd2('sd3')
      this.sd2('sd4')
      this.jz()
      this.animate()
    })
  },
  methods: {
    getGasVisualStatistics(){
      gasVisualStatistics().then(response => {
        this.countGasClient = response.data.countGasClient;
        this.eventRank = response.data.eventRank;
        this.gasEventThisYearStatistics = response.data.gasEventThisYearStatistics;
      });
    },
    // 自定义字体大小
    placeholderPic() {
      let w = document.documentElement.clientWidth / 80;
      document.documentElement.style.fontSize = w + 'px';
    },
    setup(canvas, ctx, bg, width, height) {
      ctx.beginPath();
      ctx.rect(0, 0, width, height)
      ctx.fillStyle = `rgba(${bg[0]}, ${bg[1]}, ${bg[2]}, ${1})`
      ctx.fill()
    },
    blur(ctx, canvas, amt) {
      ctx.filter = `blur(${amt}px)`
      ctx.drawImage(canvas, 0, 0)
      ctx.filter = 'none'
    },
    draw(ctx, iterations) {
      let _this = this;
      let newiterations, i, j
      for (i = 0; i < 8; i++) {
        newiterations = [iterations[0]]
        for (j = 1; j < iterations.length; j++) {
          newiterations.push(_this.getRandMidpoint(iterations[j - 1], iterations[j], 200 / (i * i + 1)))
          newiterations.push(iterations[j])
        }
        iterations = newiterations.concat([])
      }
      ctx.beginPath();
      ctx.moveTo(iterations[0].x, iterations[0].y);
      ctx.lineWidth = 2;
      ctx.strokeStyle = '#04e4c9';
      for (i = 1; i < iterations.length; i++) {
        ctx.lineTo(iterations[i].x, iterations[i].y);
      }
      ctx.stroke()
      ctx.closePath()
    },
    fade(ctx, amt, width, height, bg) {
      ctx.beginPath();
      ctx.rect(0, 0, width, height)
      ctx.fillStyle = `rgba(${bg[0]}, ${bg[1]}, ${bg[2]}, ${amt})`
      ctx.fill()
    },
    getRandMidpoint(pa, pb, range) {
      let a = Math.atan2(pb.y - pa.y, pb.x - pa.x) + Math.PI / 2
      let half = { y: (pb.y - pa.y) / 2 + pa.y, x: (pb.x - pa.x) / 2 + pa.x }
      let offset = Math.random() * range / 3 - range / 6  //这里控制闪电的抖动幅度
      let ho = {
        x: Math.cos(a) * offset + half.x,
        y: Math.sin(a) * offset + half.y
      }
      return ho
    },
    // 闪电一,二
    sd1(ele) {
      let _this = this;
      let width, height;
      let canvas = document.createElement('canvas');
      canvas.width = width = this.$refs[ele].clientWidth
      canvas.height = height = this.$refs[ele].clientHeight
      console.log(width, height, "===============")
      let ctx = canvas.getContext('2d');
      let bg = [4, 10, 11];
      _this.setup(canvas, ctx, bg, width, height);
      let iterations = [{ x: -20, y: height / 2 }, { x: -20, y: height / 2 }];
      this.$refs[ele].appendChild(canvas);
      setTimeout(() => {
        let timeID = setInterval(() => {
          iterations[0].x += 10;
          if (iterations[0].x > width - 10) {
            clearInterval(timeID)
          }
        }, 60);
      }, 1000);
      window.addEventListener('resize', function(){
        _this.setup(canvas, ctx, bg, width, height);
      })
      setInterval(function (){
        _this.blur(ctx, canvas, 1)
        _this.draw(ctx, iterations)
        _this.fade(ctx, 0.1, width, height, bg)
      }, 60)
    },
    // 闪电三,四
    sd2(ele) {
      let _this = this
      let width, height
      let canvas = document.createElement('canvas')
      canvas.width = width = this.$refs[ele].clientWidth
      canvas.height = height = this.$refs[ele].clientHeight
      let ctx = canvas.getContext('2d')
      let bg = [4, 10, 11]
      this.$refs[ele].appendChild(canvas)
      let iterations = [{ x: width + 20, y: height / 2 }, { x: width + 20, y: height / 2 }];
      setTimeout(() => {
        let timeID = setInterval(() => {
          iterations[0].x -= 10;
          if (iterations[0].x < 10) {
            clearInterval(timeID)
          }
        }, 60);
      }, 1000)

      window.addEventListener('resize', function(){
        _this.setup(canvas, ctx, bg, width, height);
      })

      setInterval(function (){
        _this.blur(ctx, canvas, 1)
        _this.draw(ctx, iterations)
        _this.fade(ctx, 0.1, width, height, bg)
      }, 60)
    },
    // 加载动画
    jz() {
      $('.jz1 ul li').each((index, item) => {
        item.style.opacity = 1 - index / 10;
      })
      setInterval(() => {
        $('.jz1 ul li').each((index, item) => {
          if (item.style.opacity == 0) {
            item.style.opacity = 1
          }
          item.style.opacity = parseFloat(item.style.opacity) - 0.1
        })
      }, 100)
      $('.jz2 ul li').each((index, item) => {
        item.style.opacity = 1 - index / 10;
      })
      setInterval(() => {
        $('.jz2 ul li').each((index, item) => {
          if (item.style.opacity == 0) {
            item.style.opacity = 1
          }
          item.style.opacity = parseFloat(item.style.opacity) - 0.1
        })
      }, 100)
    },
    // 中间背景动画
    animate() {
      let App = {};
      App.setup = function () {
        // 创建canvas元素，并加入body中
        let canvas = document.createElement('canvas');
        this.filename = "spipa";
        // 控制canvas幕布的大小
        canvas.width = document.querySelector('.animate').clientWidth;
        canvas.height = document.querySelector('.animate').clientHeight;
        this.canvas = canvas;
        document.querySelector('.animate').appendChild(canvas);
        this.ctx = this.canvas.getContext('2d');
        this.width = this.canvas.width;
        this.height = this.canvas.height;
        this.dataToImageRatio = 1;
        this.ctx.imageSmoothingEnabled = false;
        this.ctx.webkitImageSmoothingEnabled = false;
        this.ctx.msImageSmoothingEnabled = false;
        this.xC = this.width / 2;
        this.yC = this.height / 2;

        this.stepCount = 0;
        this.particles = [];
        this.lifespan = 1000;
        this.popPerBirth = 1;
        this.maxPop = 200;
        this.birthFreq = 5;

        // Build grid
        this.gridSize = 8;// 运动坐标
        this.gridSteps = Math.floor(1000 / this.gridSize);
        this.grid = [];
        let i = 0;
        for (let xx = -500; xx < 500; xx += this.gridSize) {
          for (let yy = -500; yy < 500; yy += this.gridSize) {
            // 径向场，r的三角函数，最大值在r0附近
            let r = Math.abs(xx) + Math.abs(yy),//Math.sqrt(xx*xx+yy*yy),
              r0 = 3*w, //中间方形的大小
              field;

            if (r < r0) field = 255 / r0 * r;
            else if (r > r0) field = 255 - Math.min(255, (r - r0) / 2);

            this.grid.push({
              x: xx,
              y: yy,
              busyAge: 0,
              spotIndex: i,
              isEdge: (xx == -500 ? 'left' :
                  (xx == (-500 + this.gridSize * (this.gridSteps - 1)) ? 'right' :
                      (yy == -500 ? 'top' :
                          (yy == (-500 + this.gridSize * (this.gridSteps - 1)) ? 'bottom' :
                              false
                          )
                      )
                  )
              ),
              field: field
            });
            i++;
          }
        }
        this.gridMaxIndex = i;
        this.initDraw();
      };
      App.evolve = function () {
        let time1 = performance.now();

        this.stepCount++;

        // Increment all grid ages
        this.grid.forEach(function (e) {
          if (e.busyAge > 0) e.busyAge++;
        });

        if (this.stepCount % this.birthFreq == 0 && (this.particles.length + this.popPerBirth) < this.maxPop) {
          this.birth();
        }
        App.move();
        App.draw();

        let time2 = performance.now();
      };
      App.birth = function () {
        let gridSpotIndex = Math.floor(Math.random() * this.gridMaxIndex),
          gridSpot = this.grid[gridSpotIndex],
          x = gridSpot.x, y = gridSpot.y;

        let particle = {
          hue: -10,// + Math.floor(50*Math.random()),
          sat: 95,//30 + Math.floor(70*Math.random()),
          lum: 20 + Math.floor(40 * Math.random()),
          x: x, y: y,
          xLast: x, yLast: y,
          xSpeed: 0, ySpeed: 0,
          age: 0,
          ageSinceStuck: 0,
          attractor: {
            oldIndex: gridSpotIndex,
            gridSpotIndex: gridSpotIndex,// Pop at random position on grid
          },
          name: 'seed-' + Math.ceil(10000000 * Math.random())
        };
        this.particles.push(particle);
      };
      App.kill = function (particleName) {
        let newArray = _.reject(this.particles, function (seed) {
          return (seed.name == particleName);
        });
        this.particles = _.cloneDeep(newArray);
      };
      App.move = function () {
        for (let i = 0; i < this.particles.length; i++) {
          // Get particle
          let p = this.particles[i];

          // Save last position
          p.xLast = p.x; p.yLast = p.y;

          // Attractor and corresponding grid spot
          let index = p.attractor.gridSpotIndex,
            gridSpot = this.grid[index];

          // Maybe move attractor and with certain constraints
          if (Math.random() < 0.5) {
            // Move attractor
            if (!gridSpot.isEdge) {
              // Change particle's attractor grid spot and local move function's grid spot
              let topIndex = index - 1,
                bottomIndex = index + 1,
                leftIndex = index - this.gridSteps,
                rightIndex = index + this.gridSteps,
                topSpot = this.grid[topIndex],
                bottomSpot = this.grid[bottomIndex],
                leftSpot = this.grid[leftIndex],
                rightSpot = this.grid[rightIndex];

              // Choose neighbour with highest field value (with some desobedience...)
              let chaos = 30;
              let maxFieldSpot = _.maxBy([topSpot, bottomSpot, leftSpot, rightSpot], function (e) {
                return e.field + chaos * Math.random()
              });

              let potentialNewGridSpot = maxFieldSpot;
              if (potentialNewGridSpot.busyAge == 0 || potentialNewGridSpot.busyAge > 15) {// Allow wall fading
                //if (potentialNewGridSpot.busyAge == 0) {// Spots busy forever
                // Ok it's free let's go there
                p.ageSinceStuck = 0;// Not stuck anymore yay
                p.attractor.oldIndex = index;
                p.attractor.gridSpotIndex = potentialNewGridSpot.spotIndex;
                gridSpot = potentialNewGridSpot;
                gridSpot.busyAge = 1;
              } else p.ageSinceStuck++;

            } else p.ageSinceStuck++;

            if (p.ageSinceStuck == 10) this.kill(p.name);
          }

          // Spring attractor to center with viscosity
          let k = 8, visc = 0.4;
          let dx = p.x - gridSpot.x,
            dy = p.y - gridSpot.y,
            dist = Math.sqrt(dx * dx + dy * dy);

          // Spring
          let xAcc = -k * dx,
            yAcc = -k * dy;

          p.xSpeed += xAcc; p.ySpeed += yAcc;

          // Calm the f*ck down
          p.xSpeed *= visc; p.ySpeed *= visc;

          // Store stuff in particle brain
          p.speed = Math.sqrt(p.xSpeed * p.xSpeed + p.ySpeed * p.ySpeed);
          p.dist = dist;

          // Update position
          p.x += 0.1 * p.xSpeed; p.y += 0.1 * p.ySpeed;

          // Get older
          p.age++;

          // Kill if too old
          if (p.age > this.lifespan) {
            this.kill(p.name);
            this.deathCount++;
          }
        }
      };
      App.initDraw = function () {
        this.ctx.beginPath();
        this.ctx.rect(0, 0, this.width, this.height);
        this.ctx.fillStyle = 'transparent';
        this.ctx.fill();
        this.ctx.closePath();
      };

      App.draw = function () {
        this.drawnInLastFrame = 0;
        if (!this.particles.length) return false;

        this.ctx.beginPath();
        this.ctx.rect(0, 0, this.width, this.height);
        // this.ctx.fillStyle = 'transparent';
        this.ctx.fillStyle = 'rgba(12, 22, 25, 0.1)';
        this.ctx.fill();
        this.ctx.closePath();
        for (let i = 0; i < this.particles.length; i++) {
          // Draw particle
          let p = this.particles[i];

          let h, s, l, a;

          h = p.hue + this.stepCount / 30;
          s = p.sat;
          l = p.lum;
          a = 1;

          let last = this.dataXYtoCanvasXY(p.xLast, p.yLast),
            now = this.dataXYtoCanvasXY(p.x, p.y);
          let attracSpot = this.grid[p.attractor.gridSpotIndex],
            attracXY = this.dataXYtoCanvasXY(attracSpot.x, attracSpot.y);
          let oldAttracSpot = this.grid[p.attractor.oldIndex],
            oldAttracXY = this.dataXYtoCanvasXY(oldAttracSpot.x, oldAttracSpot.y);

          this.ctx.beginPath();

          this.ctx.strokeStyle = 'green';
          this.ctx.fillStyle = 'hsla(' + h + ', ' + s + '%, ' + l + '%, ' + a + ')';

          // Particle trail
          this.ctx.moveTo(last.x, last.y);
          this.ctx.lineTo(now.x, now.y);

          this.ctx.lineWidth = 1.5 * this.dataToImageRatio;
          this.ctx.stroke();
          this.ctx.closePath();

          // Attractor positions
          this.ctx.beginPath();
          this.ctx.lineWidth = 1.5 * this.dataToImageRatio;
          this.ctx.moveTo(oldAttracXY.x, oldAttracXY.y);
          this.ctx.lineTo(attracXY.x, attracXY.y);
          this.ctx.arc(attracXY.x, attracXY.y, 1.5 * this.dataToImageRatio, 0, 2 * Math.PI, false);

          //a /= 20;
          this.ctx.strokeStyle = 'green';
          this.ctx.fillStyle = 'green';
          //this.ctx.stroke();
          this.ctx.fill();

          this.ctx.closePath();

          // UI counter
          this.drawnInLastFrame++;
        }

      };
      App.dataXYtoCanvasXY = function (x, y) {
        let zoom = 1.6;
        let xx = this.xC + x * zoom * this.dataToImageRatio,
          yy = this.yC + y * zoom * this.dataToImageRatio;

        return { x: xx, y: yy };
      };

      setTimeout(function(){
        console.log(1123)
        App.setup();
        App.draw();

        let frame = function () {
          App.evolve();
          requestAnimationFrame(frame);
        };
        frame();
      },5000)
    }
  }
};
</script>
